﻿@model GUI.Models.ArticleModel

@{
    Layout = "/Views/Shared/_Layout.cshtml";
  }



<style>

  
 blockquote.co {
    display:block;
  background: #fff;
  padding: 15px 20px 15px 35px;
  margin: 0 0 20px;
  position: relative;
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;
  
  /*Borders - (Optional)*/
  border-left: 15px solid #c76c0c;
  border-right: 2px solid #c76c0c;
  
  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
	}

blockquote.co::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
  
  /*Positioning*/
  position: absolute;
  left: 5px;
  top:3px;

}

blockquote.co::after{
  /*Reset to make sure*/
  content: "";
}

blockquote.co a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}

blockquote.co a:hover{
 color: #666;
}

blockquote em{
  font-style: italic;
}





 .myclass {
margin-left: 10%;
margin-top: 10%;
/* margin-right: auto; */
position: relative;
text-align: left;
top: 0%;
width: inherit;
     }


    .imgse  {
     position: inherit;
      padding-left: 8em;
      width: 500px;
      height: 350px;
    }
    .myButton {
	background-color:#7892c2;
	-moz-border-radius:37px;
	-webkit-border-radius:37px;
	
border-radius:37px;
	display:inline-block;
	
cursor:pointer;
	color:#ffffff;
	font-family:arial;
	
font-size:17px;
	padding:6px 11px;
	
text-decoration:none;
	text-shadow:0px 1px 0px #283966;
}

 .btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #2b101f;
  font-size: 8px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

    .tab_art {
        background-color:red;
        width:inherit;
        margin:auto;
    }
        .tab_art .co {
            background-color:green;
            width:1%;
        }
        
</style>
 

<script src="~/Scripts/jquery-1.7.1.js"></script>
<link href="~/Content/jquery-ui/jquery-uidatepicker.css" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
<script src="~/Scripts/jquery-ui-1.10.4.js"></script>
<script src="~/Content/AdminLTE/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<link href="~/Content/AdminLTE/css/bootstrap.min.css" rel="stylesheet" />
 <script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script>
 
        <!-- font Awesome -->
        <link href="~/Content/AdminLTE/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
     <link href="~/Content/AdminLTE/css/ionicons.css" rel="stylesheet" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <!-- Bootstrap -->
   <script src="~/Content/AdminLTE/js/app.js"></script>
   <script src="~/Content/AdminLTE/js/bootstrap.min.js"></script> 
  

    <div class="margin">
                                      
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-info btn-flat">Action</button>
                                            <button type="button" class="btn btn-info btn-flat dropdown-toggle" data-toggle="dropdown">
                                                <span class="caret"></span>
                                                <span class="sr-only">Toggle Dropdown</span>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li> @Html.ActionLink("(+ Ajouter)", "Create", new { set02568auId = @Html.Encode(@ViewBag.id) })</li>
                                                     <li>  @Html.ActionLink("Edit", "EditArticle", new { id_article_to_edit = @Html.Encode(@ViewBag.id) })</li>
                                                  <li>  @Html.ActionLink("Retour", "Index", new  { id=ViewBag.idauthor})</li>
                                            </ul>
                                        </div>
                                        
                                  
                                    </div>               




  <div class="box box-primary">
                                <div class="box-header">
                                    <h3 class="box-title"> Détail </h3>
                                </div><!-- /.box-header -->

<div class="contain">
   
 
    


   
</div>

      </div>


<script>
    (function () {
       
        var DetailArticle = {
           
         
            Init: function(config){
                this.tab_art=config.tab_art;
                this.contain=config.contain;
                this.Bimg=config.Bimg;
                this.Mimg=config.Mimg;
                this.Limg=config.Limg;
                this.Atitle=config.Atitle;
                this.InsertTheArticle(this);
                this.convertToraw();
                this.InsertInTotheDom(this);
             
                      },

            convertToraw:function(){
               
               ArticleObj =@Html.Raw(Json.Encode(@Model.ArticleContenent));
                
                return ArticleObj;
            },
            InsertTheArticle:function(obj){
                var  obj_art = this.convertToraw();
                $('<article class=myclass>'+obj_art+'</article>',{
                    class:'art'
                }).appendTo(obj.contain);
            },
           
            InsertInTotheDom:function(obj){
                var  obj_art = this.convertToraw();

               //case 1
               if ($.isEmptyObject(obj.Bimg) == false && $.isEmptyObject(obj.Mimg) == true && $.isEmptyObject(obj.Limg) == true) {

                   var t="<img class=imgse src='data:image;base64,@ViewBag.imagebyte'+/>"
               
                   $('<span>'+t+'</span>',{
                       class:''
                   }).insertBefore($('.myclass'));
               }
                //case 2

                if ($.isEmptyObject(obj.Bimg) == false && $.isEmptyObject(obj.Mimg) == false && $.isEmptyObject(obj.Limg) == true) {

                    var t="<img class=imgse src='data:image;base64,@ViewBag.imagebyte'+/>"
                    var t1="<img class=imgse src='data:image;base64,@ViewBag.ImageMedium'+/>"
                     $('<span>'+t+'</span>',{
                         class:''
                     }).insertBefore($('.myclass'));
                     $('<span>'+t1+'</span>',{
                         class:''
                     }).insertAfter($('.myclass'));
                }
                //endi if

                //case 3
                if ($.isEmptyObject(obj.Bimg) == false && $.isEmptyObject(obj.Mimg) == false && $.isEmptyObject(obj.Limg) == false) {

                    var t="<img class=imgse src='data:image;base64,@ViewBag.imagebyte'+/>"
                    var t1="<img class=imgse src='data:image;base64,@ViewBag.ImageMedium'+/>"
                    var t2="<img class=imgse src='data:image;base64,@ViewBag.ImageLittle'+/>"
                     $('<span>'+t+'</span>',{
                         class:''
                     }).insertBefore($('.myclass'));
                     $('<span>'+t1+'</span>',{
                         class:''
                     }).insertBefore($('.myclass'));
                     $('<span>'+t2+'</span>',{
                         class:''
                     }).insertBefore($('.myclass'));
                }


                //case 4
                if ($.isEmptyObject(obj.Bimg) == false && $.isEmptyObject(obj.Mimg) == true && $.isEmptyObject(obj.Limg) == false) {

                    var t="<img class=imgse src='data:image;base64,@ViewBag.imagebyte'+/>"
                   
                    var t2="<img class=imgse src='data:image;base64,@ViewBag.ImageLittle'+/>"
                    $('<span>'+t+'</span>',{
                        class:''
                    }).insertBefore($('.myclass'));
                   
                    $('<span>'+t2+'</span>',{
                        class:''
                    }).insertBefore($('.myclass'));
                }
                //case 5
                if ($.isEmptyObject(obj.Bimg) == true && $.isEmptyObject(obj.Mimg) == true && $.isEmptyObject(obj.Limg) == false) {

                    var t2="<img class=imgse src='data:image;base64,@ViewBag.ImageLittle'+/>"
                      $('<span>'+t2+'</span>',{
                          class:''
                      }).insertBefore($('.myclass'));
                  }

                //case 6
                if ($.isEmptyObject(obj.Bimg) == false && $.isEmptyObject(obj.Mimg) == false && $.isEmptyObject(obj.Limg) == true) {

                  
                    $('<span>'+t2+'</span>',{
                        class:''
                    }).insertBefore($('.myclass'));
                }
            
                //case 7
                if ($.isEmptyObject(obj.Bimg) == true && $.isEmptyObject(obj.Mimg) == false && $.isEmptyObject(obj.Limg) == true) {

                    var t1="<img class=imgse src='data:image;base64,@ViewBag.ImageMedium'+/>"
                    $('<span>'+t1+'</span>',{
                        class:''
                    }).insertBefore($('.myclass'));
                }
            
            },

          
        };
       
      
        DetailArticle.Init({
            tab_art:$('.tab_art'),
            contain : $('.contain'),
            Bimg : '@Model.ImageBytes',
            Mimg: '@Model.ImageMedium',
            Limg:'@Model.ImageLittle',
            Atitle:'@Model.Title'
        });

    })();


</script>



